// 放大镜
window.onload = function() {
    class Small_Big {
        constructor() {
            // 获取元素
            this.mbox = document.querySelector(".mbox");
            this.bbox = document.querySelector(".bbox");
            this.span = document.querySelector(".mbox span");
            this.mboxi = document.querySelector(".mbox img")
            this.bboxi = document.querySelector(".bbox img");
            // 执行事件
            this.addEvent()
        };
        // 绑定事件
        addEvent() {
            const that = this;
            this.mbox.onmouseover = function() {
                // 执行显示
                that.show()
            }
            this.mbox.onmousemove = function(eve) {
                let e = eve ? eve : window.event;
                // 执行移动
                that.move(e);
            }
            this.mbox.onmouseleave = function() {
                // 执行消失
                that.disappear()
            }
        };
        show() {
            this.bbox.style.display = "block";
            this.span.style.display = "block";
            // 设置span的尺寸 = 大图容器 / 大图 * 小图容器
            this.span.style.width = this.mbox.offsetWidth * this.bbox.offsetWidth / this.bboxi.offsetWidth + "px";

            this.span.style.height = this.mbox.offsetHeight * this.bbox.offsetHeight / this.bboxi.offsetHeight + "px";
        }

        move(e) {
            // 边界限定
            let maxLeft = this.mbox.offsetWidth - this.span.offsetWidth;
            let maxTop = this.mbox.offsetHeight - this.span.offsetHeight;
            // 设置当前span的移动位置
            let left = e.pageX - 35 - this.span.offsetWidth / 2;
            let top = e.pageY - 235 - this.span.offsetHeight / 2;
            if (left < 0) {
                left = 0
            }
            if (top < 0) {
                top = 0
            }
            if (left > maxLeft) {
                left = maxLeft
            }
            if (top > maxTop) {
                top = maxTop
            };
            this.span.style.left = left + "px";
            this.span.style.top = top + "px";
            // 大图位置移动
            // 计算小图内移动的比例，大图等比例移动
            let l = left / maxLeft;
            let t = top / maxTop;
            // 计算大图可移动位置=大图尺寸-大图可视容器尺寸
            this.bboxi.style.left = -l * (this.bboxi.offsetWidth - this.bbox.offsetWidth) + "px";
            this.bboxi.style.top = -t * (this.bboxi.offsetHeight - this.bbox.offsetHeight) + "px"
        }
        disappear() {
            this.bbox.style.display = "none";
            this.span.style.display = "none";
        }

    }
    new Small_Big()

    // 选项卡切换
    class ChangeImg {
        constructor() {
            // 获取元素
            this.listli = document.querySelectorAll(".goods_gallery_s li");
            this.mboximg = document.querySelector(".mbox img");
            this.bboximg = document.querySelector(".bbox img");
            // 图片库
            this.mimgs = ["./images/items-img-1-b.jpg", "./images/items-img-2-b.jpg", "./images/items-img-1-b.jpg", "./images/item-img-3-b.jpg"];
            this.bimgs = ["./images/items-img-1-b.jpg", "./images/items-img-2-b.jpg", "./images/items-img-1-b.jpg", "./images/item-img-3-b.jpg"];
            //设置上一个索引
            this.prev = 0;

            // 执行切换事件
            this.change()
        }
        change() {
            const that = this;
            for (let i = 0; i < this.listli.length; i++) {
                //获取现在触发元素的索引
                this.listli[i].index = i;
                this.listli[i].onclick = function() {
                    // 清除上一个选中的边框
                    that.listli[that.prev].className = "";
                    // 更换图片
                    that.mboximg.src = that.mimgs[this.index];
                    that.bboximg.src = that.bimgs[this.index];
                    // 添加选中的边框
                    this.className = "active";
                    that.prev = this.index;
                }
            }
        }
    }
    new ChangeImg()
}